import React, { FC } from "react"
import { Handle } from "@xyflow/react"
import useWorkflowStore from "@/stores/workflow"
import type { HandleType, Position } from "@xyflow/react"

type Props = {
  id: string // 句柄 id
  type: HandleType // 句柄类型
  position: Position // 句柄位置
  label?: string // 句柄标签
  nodeId?: string // 节点 id
}

/**
 * 自定义句柄
 */
const CustomHandle: FC<Props> = (props) => {
  const { id, type, position } = props

  const isNodeToolbarVisible = useWorkflowStore((state) => state.isNodeToolbarVisible)
  const setIsNodeToolbarVisible = useWorkflowStore((state) => state.setIsNodeToolbarVisible)

  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
    // 阻止冒泡
    e.stopPropagation()
    setIsNodeToolbarVisible(!isNodeToolbarVisible)
  }

  return <Handle id={id} type={type} position={position} onClick={handleClick} />
}

export default CustomHandle
